import Svg,{
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');

export default class SvgExample14 extends React.Component {


  render() {
    return (
      <View style={{...StyleSheet.absoluteFill,alignItems: 'center', justifyContent: 'center' }}>
        <Svg
          height="100"
          width="100"
        >
          <Defs>
            <RadialGradient id="grad" cx="50%" cy="50%" rx="50%" ry="50%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse">
              <Stop
                offset="0%"
                stopColor="#ff0"
                stopOpacity="1"
              />
              <Stop
                offset="100%"
                stopColor="#00f"
                stopOpacity="1"
              />
            </RadialGradient>

            <ClipPath id="clip">
              <G scale="0.9" x="10">
                <Circle cx="30" cy="30" r="20"/>
                <Ellipse cx="60" cy="70" rx="20" ry="10" />
                <Rect x="65" y="15" width="30" height="30" />
                <Polygon points="20,60 20,80 50,70" />
                <Text
                  x="50"
                  y="30"
                  fontSize="32"
                  fonWeight="bold"
                  textAnchor="middle"
                  scale="1.2"
                >Q</Text>
              </G>
            </ClipPath>

          </Defs>
          <Rect
            x="0"
            y="0"
            width="100"
            height="100"
            fill="url(#grad)"
            clipPath="url(#clip)"
          />
        </Svg>
      </View>
    );
  }
}